{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<style>
    .stats-card {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .stats-card h6 {
        color: #000000;
        margin-bottom: 10px;
        font-weight: 500;
    }
    .stats-card .count {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
    .stats-card .percentage {
        font-size: 16px;
        color: #666;
    }
    .card-title {
        color: #000000 !important;
    }
    .list-group-item.active {
        background-color: #F5F9FF !important;
        color: #000000 !important;
        border-color: #F5F9FF !important;
    }
    .black-title {
        color: #000000 !important;
        font-weight: 500 !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">用户分群管理</h5>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSegmentModal">
                        <i class="bi bi-plus"></i> 创建新分群
                    </button>
                </div>
                <div class="card-body">
                    <!-- 筛选条件 -->
                    <div class="filter-section mb-4">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label" for="dateRange">入住时间范围</label>
                                    <input type="text" class="form-control" id="dateRange" name="dateRange" aria-label="选择入住时间范围">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label" for="amountRange">消费金额</label>
                                    <select class="form-control" id="amountRange" name="amountRange">
                                        <option value="">全部</option>
                                        <option value="0-1000">0-1000元</option>
                                        <option value="1000-5000">1000-5000元</option>
                                        <option value="5000+">5000元以上</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label" for="membershipLevel">会员等级</label>
                                    <select class="form-control" id="membershipLevel" name="membershipLevel">
                                        <option value="">全部</option>
                                        <option value="普通会员">普通会员</option>
                                        <option value="银卡会员">银卡会员</option>
                                        <option value="金卡会员">金卡会员</option>
                                        <option value="钻石会员">钻石会员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group mt-4 pt-2">
                                    <button class="btn btn-primary d-block w-100" id="applyFilter" aria-label="应用筛选条件">
                                        <i class="mdi mdi-filter" aria-hidden="true"></i> 应用筛选
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 用户群体统计 -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h6>高价值客户</h6>
                                <div class="d-flex justify-content-between">
                                    <span class="count" id="vipCount">0</span>
                                    <span class="percentage" id="vipPercentage">0%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h6>潜在客户</h6>
                                <div class="d-flex justify-content-between">
                                    <span class="count" id="potentialCount">0</span>
                                    <span class="percentage" id="potentialPercentage">0%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h6>活跃客户</h6>
                                <div class="d-flex justify-content-between">
                                    <span class="count" id="activeCount">0</span>
                                    <span class="percentage" id="activePercentage">0%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h6>流失客户</h6>
                                <div class="d-flex justify-content-between">
                                    <span class="count" id="churnCount">0</span>
                                    <span class="percentage" id="churnPercentage">0%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数据可视化区域 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">用户分布</h6>
                                    <canvas id="userDistributionChart"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">消费趋势</h6>
                                    <canvas id="consumptionTrendChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 用户列表 -->
                    <div class="table-responsive">
                        <table class="table table-hover" id="userSegmentTable">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>会员等级</th>
                                    <th>消费总额</th>
                                    <th>最近入住</th>
                                    <th>入住次数</th>
                                    <th>用户分群</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建分群模态框 -->
<div class="modal fade" id="createSegmentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建新用户分群</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="segmentForm">
                    <div class="mb-3">
                        <label class="form-label">分群名称</label>
                        <input type="text" class="form-control" id="segmentName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">条件设置</label>
                        <div id="conditionContainer">
                            <!-- 动态添加条件 -->
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addCondition">
                            添加条件
                        </button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveSegment">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- Toast 提示组件 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast" id="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

<!-- 标签类别列表 -->
<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h6 class="mb-2" style="color: #000000 !important;">用户价值</h6>
        </div>
        <div class="card-body">
            <div class="list-group" id="tagCategories">
                <a href="#" class="list-group-item list-group-item-action" style="background-color: #F5F9FF; color: #000000;" data-category="all">
                    全部用户
                </a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;" data-category="high-value">
                    高价值客户
                </a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;" data-category="vip">
                    VIP会员
                </a>
            </div>
        </div>
        <div class="card-header">
            <h6 class="mb-2" style="color: #000000 !important;">活跃度</h6>
        </div>
        <div class="card-body">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">活跃客户</a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">潜在客户</a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">流失客户</a>
            </div>
        </div>
        <div class="card-header">
            <h6 class="mb-2" style="color: #000000 !important;">客户类型</h6>
        </div>
        <div class="card-body">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">新注册用户</a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">常住客户</a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">商务客户</a>
                <a href="#" class="list-group-item list-group-item-action" style="color: #000000;">休闲客户</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ url_for('static', filename='js/user_segments.js') }}"></script>
{% endblock %}
